var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131448&t=6f7b1534d0d276bbfdad97cdf85700e6'

var vm = new Vue({
    el: '#app',
    data: {
        list: [
            { name: '秋刀鱼', price: 88, pic, count: 1 },
            { name: '大黄鱼', price: 777, pic, count: 2 },
            { name: '皮皮虾', price: 9, pic, count: 3 },
        ]
    },
    methods: {
        // 点击+号时物品数量+1
        add(item) {
            // 最大是5
            if (item.count < 5) item.count++;
        },
        // 点击-号时物品数量-1
        sub(item) {
            // 最小是1
            if (item.count > 1) item.count--;
        },
        // 当点击清空时物品清空
        clear() {
            this.list = [];
        },
    },
    computed: {
        // 总数量
        zongshu() {
            var sum = 0;
            this.list.forEach((item) => {
                sum += item.count;
            });
            return sum;
        },
        // 总价格
        zongjia() {
            var sum = 0;
            this.list.forEach((item) => {
                sum += item.price * item.count
            });
            return sum;
        }
    }
})